<style>
    .mincontents {
        margin: 0 auto;
        width: min-content;
    }

    img {
        width: 300px;
    }

    .fitcontents {
        margin: 0 auto;
        width: fit-content;
    }
    div ~ p {
        font-size: 50px;
    }
</style>
<div class="mincontents">
    <img src="image/cat.jpg" alt="">
    <div class="mincontent">
        如果这个宽度比图片的还大就以这个为准（最大的不断行的元素宽度：图片，最宽单词和固定的盒子的宽度）
        主要实现水平居中
    </div>
</div>
<div class="fitcontents">
    <img src="image/cat.jpg" alt="">
    <div class="fitcontent">
        填充整行了，但是margin:auto 可以水平居中填充整行了，但是margin:a
        <!--类似text-align:center;但是text-align:center后内部需要设置text-align:left来设置文字左对齐-->
    </div>
</div>
<div>
    <p>One</p>
    <div>Two</div>
    <p>Three</p>
</div>
<div>
    <div>Four</div>
    <div>
        <p>Five</p>
        <p>Five</p>
        <p>Five</p>
    </div>
    <p>Five</p>
    <p>Six</p>
    <p>Seven</p>
    <p>Five</p>
    <p>Five</p>
</div>